<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出入库记录 - 智能仓储管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            background-color: #343a40;
            color: white;
            font-weight: bold;
        }
        .sidebar {
            height: 100vh;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #343a40;
            padding-top: 20px;
        }
        .sidebar a {
            padding: 15px 20px;
            text-decoration: none;
            font-size: 18px;
            color: #adb5bd;
            display: block;
            transition: 0.3s;
        }
        .sidebar a:hover {
            color: white;
            background-color: #495057;
        }
        .main-content {
            margin-left: 250px;
            padding: 20px;
        }
        .filter-panel {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .filter-row {
            margin-bottom: 15px;
        }
        .operation-in {
            color: #28a745;
            font-weight: bold;
        }
        .operation-out {
            color: #dc3545;
            font-weight: bold;
        }
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                height: auto;
                position: relative;
            }
            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <div class="sidebar col-md-2">
        <div class="text-center mb-5">
            <h2 class="text-white">智能仓储</h2>
        </div>
        <a href="/">首页</a>
        <a href="/items">物品管理</a>
        <a href="/locations">位置管理</a>
        <a href="/logs">出入库记录</a>
    </div>

    <div class="main-content">
        <div class="container-fluid">
            <h1 class="mb-4">出入库记录</h1>
            
            <!-- 统计图表 -->
            <div class="row mb-5">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">出入库统计</div>
                        <div class="card-body">
                            <canvas id="operationChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">最近30天趋势</div>
                        <div class="card-body">
                            <canvas id="trendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 过滤面板 -->
            <div class="filter-panel">
                <h4>过滤条件</h4>
                <div class="row filter-row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="item_name">物品名称</label>
                            <input type="text" class="form-control" id="item_name" placeholder="输入物品名称">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="operation_type">操作类型</label>
                            <select class="form-control" id="operation_type">
                                <option value="all">全部</option>
                                <option value="IN">入库</option>
                                <option value="OUT">出库</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="start_date">开始日期</label>
                            <input type="date" class="form-control" id="start_date">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="end_date">结束日期</label>
                            <input type="date" class="form-control" id="end_date">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="location">位置</label>
                            <select class="form-control" id="location">
                                <option value="all">全部位置</option>
                                {% for loc in locations %}
                                <option value="{{ loc[1] }}">{{ loc[1] }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-9 text-right">
                        <button id="filterBtn" class="btn btn-primary">应用过滤</button>
                        <button id="resetBtn" class="btn btn-secondary ml-2">重置</button>
                        <button id="exportBtn" class="btn btn-success ml-2">导出记录</button>
                    </div>
                </div>
            </div>

            <!-- 日志表格 -->
            <div class="card">
                <div class="card-header">
                    出入库记录列表
                    <div class="float-right">
                        总计: <span class="badge badge-primary">{{ total_logs }}</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>物品名称</th>
                                    <th>RFID标签ID</th>
                                    <th>操作类型</th>
                                    <th>数量</th>
                                    <th>位置</th>
                                    <th>操作时间</th>
                                    <th>操作人</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody id="logsTableBody">
                                {% for log in logs %}
                                <tr>
                                    <td>{{ log[0] }}</td>
                                    <td>{{ log[2] }}</td>
                                    <td>{{ log[1] }}</td>
                                    <td>
                                        <span class="{{ 'operation-in' if log[3] == 'IN' else 'operation-out' }}">
                                            {{ '入库' if log[3] == 'IN' else '出库' }}
                                        </span>
                                    </td>
                                    <td>{{ log[4] }}</td>
                                    <td>{{ log[5] }}</td>
                                    <td>{{ log[7] }}</td>
                                    <td>{{ log[8] or '系统' }}</td>
                                    <td>{{ log[9] or '-' }}</td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="9" class="text-center">暂无记录</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 分页控件 -->
            {% if total_pages > 1 %}
            <div class="mt-4">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if current_page > 1 %}
                        <li class="page-item">
                            <a class="page-link" href="/logs?page={{ current_page - 1 }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% endif %}
                        
                        {% for page_num in range(1, total_pages + 1) %}
                        <li class="page-item {{ 'active' if page_num == current_page else '' }}">
                            <a class="page-link" href="/logs?page={{ page_num }}">{{ page_num }}</a>
                        </li>
                        {% endfor %}
                        
                        {% if current_page < total_pages %}
                        <li class="page-item">
                            <a class="page-link" href="/logs?page={{ current_page + 1 }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
            {% endif %}
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 初始化图表
            // 出入库统计图表
            const operationCtx = document.getElementById('operationChart').getContext('2d');
            new Chart(operationCtx, {
                type: 'pie',
                data: {
                    labels: ['入库', '出库'],
                    datasets: [{
                        data: [{{ total_in }}, {{ total_out }}],
                        backgroundColor: [
                            '#28a745',
                            '#dc3545'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });

            // 获取趋势数据并绘制图表
            $.ajax({
                url: '/api/log_trends',
                type: 'GET',
                success: function(data) {
                    if (data.dates && data.dates.length > 0) {
                        const trendCtx = document.getElementById('trendChart').getContext('2d');
                        new Chart(trendCtx, {
                            type: 'line',
                            data: {
                                labels: data.dates,
                                datasets: [
                                    {
                                        label: '入库数量',
                                        data: data.in_data,
                                        borderColor: '#28a745',
                                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                                        tension: 0.1
                                    },
                                    {
                                        label: '出库数量',
                                        data: data.out_data,
                                        borderColor: '#dc3545',
                                        backgroundColor: 'rgba(220, 53, 69, 0.1)',
                                        tension: 0.1
                                    }
                                ]
                            },
                            options: {
                                responsive: true,
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        ticks: {
                                            stepSize: 1
                                        }
                                    }
                                }
                            }
                        });
                    }
                },
                error: function() {
                    console.log('获取趋势数据失败');
                }
            });

            // 过滤按钮点击事件
            $('#filterBtn').click(function() {
                applyFilters();
            });

            // 重置按钮点击事件
            $('#resetBtn').click(function() {
                $('#item_name').val('');
                $('#operation_type').val('all');
                $('#start_date').val('');
                $('#end_date').val('');
                $('#location').val('all');
                applyFilters();
            });

            // 导出按钮点击事件
            $('#exportBtn').click(function() {
                let exportUrl = '/api/export_logs?';
                const filters = getFilterValues();
                
                Object.keys(filters).forEach(key => {
                    if (filters[key] && filters[key] !== 'all') {
                        exportUrl += `${key}=${encodeURIComponent(filters[key])}&`;
                    }
                });
                
                window.location.href = exportUrl;
            });

            // 应用过滤条件
            function applyFilters() {
                const filters = getFilterValues();
                let queryParams = '';
                
                Object.keys(filters).forEach(key => {
                    if (filters[key] && filters[key] !== 'all') {
                        queryParams += `${queryParams ? '&' : '?'}${key}=${encodeURIComponent(filters[key])}`;
                    }
                });
                
                window.location.href = '/logs' + queryParams;
            }

            // 获取过滤条件值
            function getFilterValues() {
                return {
                    item_name: $('#item_name').val().trim(),
                    operation_type: $('#operation_type').val(),
                    start_date: $('#start_date').val(),
                    end_date: $('#end_date').val(),
                    location: $('#location').val()
                };
            }

            // 表格行悬停效果
            $('#logsTableBody tr').hover(function() {
                $(this).addClass('bg-light');
            }, function() {
                $(this).removeClass('bg-light');
            });
        });
    </script>
</body>
</html>